<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .my-box {
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      background-color: antiquewhite;
    }

    .my-box div {
      flex-grow: 1;
      flex-basis: 50%;
      background-color: red;
      height: 30px;
      display: grid;
      place-items: center;
    }
  </style>
</head>

<body class="w-full min-h-screen h-screen overflow-hidden flex flex-col">
  <div class="w-1/2 h-1/2 bg-blue-500 m-auto flex flex-wrap box-border">
    <div class="bg-red-100 basis-1/2 grow h-10">1</div>
    <div class="bg-red-100 basis-1/2 grow h-10">2</div>
    <div class="bg-red-100 basis-1/2 grow h-10">3</div>
    <div class="bg-red-100 basis-1/2 grow h-10">4</div>
    <div class="bg-red-100 basis-1/2 grow h-10">5</div>
  </div>

  <div class="my-box">
    <div>1</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
  </div>
  <div class="space-x-4">
    <div class="inline-block bg-slate-400">01</div>
    <div class="inline-block bg-slate-500">02</div>
    <div class="inline-block bg-slate-600">03</div>
  </div>

  <div class="space-y-4">
    <div class="bg-emerald-300">01</div>
    <div class="bg-emerald-400">02</div>
    <div class="bg-emerald-500">03</div>
  </div>


  <div class="text-lg font-bold size-40 bg-red-500 rounded-lg p-2">
    测试
  </div>




  <hr>



  <div id="tianai-captcha-parent">
    <div id="tianai-captcha-bg-img"></div>

    <div id="tianai-captcha-box">
      <img id="tianai-captcha-loading" class="loading" style="display: none;" src=">
  
<div id=" tianai-captcha" class="tianai-captcha-slider" style="transform: translateX(0px);">
      <div class="slider-tip">
        <span id="tianai-captcha-slider-move-track-font">拖动滑块完成拼图</span>
      </div>
      <div class="content">
        <div class="bg-img-div">
          <img id="tianai-captcha-slider-bg-img" src="" alt="">
          <canvas id="tianai-captcha-slider-bg-canvas"></canvas>
        </div>
        <div class="slider-img-div" id="tianai-captcha-slider-img-div">
          <img id="tianai-captcha-slider-move-img" src="" alt="">
        </div>
        <div class="tianai-captcha-tips" id="tianai-captcha-tips">验证失败，请重新尝试</div>
      </div>
      <div class="slider-move">
        <div class="slider-move-track">
          <div id="tianai-captcha-slider-move-track-mask"
            style="border-color: rgb(2, 152, 248); background-color: rgb(137, 210, 255);"></div>
          <div class="slider-move-shadow"></div>
        </div>
        <div class="slider-move-btn" id="tianai-captcha-slider-move-btn" style="">
        </div>
      </div>

    </div>
  </div>
  <div class="slider-bottom">
    <div class="close-btn" id="tianai-captcha-slider-close-btn"></div>
    <div class="refresh-btn" id="tianai-captcha-slider-refresh-btn"></div>
  </div>


  </div>







  <script>
    console.log('== script ====>');

    const numberToChinese = (number) => {
      const chineseNumberMap = {
        0: '零',
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '七',
        8: '八',
        9: '九',
      };

      const chineseUnitMap = {
        10: '十',
        100: '百',
        1000: '千',
        10000: '万',
        100000000: '亿',
      };

      const convertNumber = (num) => {
        let result = '';
        const numStr = String(num);
        const length = numStr.length;

        for (let i = 0; i < length; i++) {
          const digit = Number(numStr[i]);
          const unit = 10 ** (length - i - 1);

          if (digit !== 0) {
            result += chineseNumberMap[digit] + chineseUnitMap[unit];
          } else {
            // 处理连续的零，只保留一个零
            if (result[result.length - 1] !== chineseNumberMap[0]) {
              result += chineseNumberMap[digit];
            }
          }
        }

        return result;
      };

      if (number === 0) {
        return chineseNumberMap[0];
      }

      let integerPart = '';
      let decimalPart = '';

      if (number < 0) {
        integerPart = '负';
        number = Math.abs(number);
      }

      const integer = Math.floor(number);
      const decimal = number - integer;

      integerPart += convertNumber(integer);

      if (decimal > 0) {
        decimalPart = '点';
        const decimalStr = String(decimal).slice(2);
        for (let i = 0; i < decimalStr.length; i++) {
          const digit = Number(decimalStr[i]);
          decimalPart += chineseNumberMap[digit];
        }
      }

      return integerPart + decimalPart;
    };

    // 示例用法
    console.log(numberToChinese(12345)); // 一万二千三百四十五
    console.log(numberToChinese(-123.45)); // 负一百二十三点四五
  </script>
</body>

</html>